<!-- Licensed under a BSD license. See license.html for license -->
<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">
  <title>WebGL - Triangle with position for color</title>
  <link type="text/css" href="resources/webgl-tutorials.css" rel="stylesheet" />
</head>

<body>
  <div class="description">
    test anim 
  </div>
  <canvas id="canvas"></canvas>
  <div id="uiContainer">
    <div id="ui">
      <div id="x"></div>
      <div id="y"></div>
      <div id="angle"></div>
      <div id="scaleX"></div>
      <div id="scaleY"></div>
    </div>
  </div>
</body>
<!-- vertex shader -->
<script id="vertex-shader-2d" type="x-shader/x-vertex">
attribute vec4 a_position;

attribute vec4 a_color;
uniform mat4 u_mat;

varying vec4 v_color;

void main() {
  gl_Position = u_mat * a_position;
  v_color = a_color;
}
</script>
<!-- fragment shader -->
<script id="fragment-shader-2d" type="x-shader/x-fragment">
precision mediump float;

varying vec4 v_color;

void main() {
  gl_FragColor = v_color;
}
</script>
<!--
for most samples webgl-utils only provides shader compiling/linking and
canvas resizing because why clutter the examples with code that's the same in every sample.
See https://webglfundamentals.org/webgl/lessons/webgl-boilerplate.html
and https://webglfundamentals.org/webgl/lessons/webgl-resizing-the-canvas.html
for webgl-utils, m3, m4, and webgl-lessons-ui.
-->
<script src="resources/webgl-utils.js"></script>
<script src="resources/webgl-lessons-ui.js"></script>
<script src="resources/m3.js"></script>
<script src="resources/m4.js"></script>
<script>
  "use strict";

  function main() {
    // Get A WebGL context
    /** @type {HTMLCanvasElement} */
    var canvas = document.querySelector("#canvas");
    var gl = canvas.getContext("webgl");
    if (!gl) {
      return;
    }

    // setup GLSL program
    var program = webglUtils.createProgramFromScripts(gl, ["vertex-shader-2d", "fragment-shader-2d"]);

    webglUtils.resizeCanvasToDisplaySize(gl.canvas);

    // Tell WebGL how to convert from clip space to pixels
    gl.viewport(0, 0, gl.canvas.width, gl.canvas.height);

    // Clear the canvas.
    gl.clear(gl.COLOR_BUFFER_BIT);

    // Tell it to use our program (pair of shaders)
    gl.useProgram(program);

    // look up where the vertex data needs to go.
    var positionAttributeLocation = gl.getAttribLocation(program, "a_position");
    var colorAttr = gl.getAttribLocation(program, "a_color");

    let data1 = new Float32Array([
      -0.5, -0.5, 1, 1,
      0.5, -0.5, 1, 1,
      0.5, 0.5, 1, 1]);

    var positionBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, positionBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data1,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(positionAttributeLocation);
    gl.vertexAttribPointer(
      positionAttributeLocation, 4, gl.FLOAT, false, 0, 0);

    let data2 = new Float32Array([
      1, 0, 1, 1,
      0, 1, 1, 1,
      1, 1, 0, 1]);
    var colorBuffer = gl.createBuffer();
    gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
    gl.bufferData(
      gl.ARRAY_BUFFER,
      data2,
      gl.STATIC_DRAW);
    gl.enableVertexAttribArray(colorAttr);
    gl.vertexAttribPointer(
      colorAttr, 4, gl.FLOAT, false, 0, 0);

    var matrixLocat = gl.getUniformLocation(program, "u_mat");
    var matData = m4.orthographic(0, 1, 1, 0, -1, 1);
    matData = m4.translate(matData, 0.5, 0.5, 0);
    matData = m4.scale(matData, 0.5, 0.5, 1);
    
    var tim = Date.now();
    var tim2 = tim;
    var getAngle = function () {
      var cur = Date.now();
      var delta = cur - tim;
      tim = cur;
      return (0.8 * delta / 1000) % 3;
    }

    var getColor = function (color, isMinus) {
      var cur = Date.now();
      var delta = cur - tim2;
      tim2 = cur;
      if (isMinus) {
        return color - (0.5 * delta / 1000);
      } else {
        return color + (0.5 * delta / 1000);
      }
    }

    var colorReverse = false;
    var colorVar = 0;
    var changeColor = function () {
      colorVar = getColor(colorVar, colorReverse);
      if (colorVar >= 1) {
        colorReverse = true;
      }
      if (colorVar <= 0) {
        colorReverse = false;
      }
      data2 = new Float32Array([
        colorVar, 0, 0, 1,
        0, colorVar, 0, 1,
        0, 0, colorVar, 1]);
      gl.bindBuffer(gl.ARRAY_BUFFER, colorBuffer);
      gl.bufferData(
        gl.ARRAY_BUFFER,
        data2,
        gl.STATIC_DRAW);
      gl.enableVertexAttribArray(colorAttr);
      gl.vertexAttribPointer(
        colorAttr, 4, gl.FLOAT, false, 0, 0);
    }
    var rotate = function () {
      matData = m4.zRotate(matData, getAngle());
      gl.uniformMatrix4fv(matrixLocat, false, matData);
    }
    // Draw the scene.
    function drawScene() {
      var primitiveType = gl.TRIANGLES;
      var offset = 0;
      var count = 3;
      gl.drawArrays(primitiveType, offset, count);
    }
    function func() {
      changeColor();
      rotate();
      drawScene();
      requestAnimationFrame(func);
    }

    func();
  }

  main();
</script>

</html>